<template>
  <div v-if="imageURLs.length > 0">
    <p>共 {{ this.mols.length }} 条记录</p>
    <button @click="preSearch">返回搜索页</button>
    <div style="margin: 50px auto; width: 2000px">
      <tr>
        <th>结构相似度</th>
        <th>目标结构</th>
        <th>搜索结构</th>
        <th>文章标题</th>
        <th>作者</th>
        <th>机构</th>
        <th>邮箱</th>
        <th>联系方式</th>
        <th>通讯地址</th>
        <th>发布时间</th>
        <th>操作</th>
      </tr>

      <!-- 访问的url 前加上 https://sci-hub.se/ -->

      <tr v-for="(item, index) in pageData" :key="index">
        <td>{{ (item.similarity * 100).toFixed(2) + "%" }}</td>
        <td>
          <img :src="targetURL" alt="" />
        </td>
        <td>
          <img :src="item.imageURL" alt="" />
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
          <div
            v-for="(item, index) in item.doi"
            :key="index"
            style="margin-top: 20px"
          >
            {{ item }}
            <a :href="'https://sci-hub.se/' + item" target="_blank">查看</a>
          </div>
        </td>
      </tr>
    </div>

    <el-pagination
      style="margin-top: 12px; text-align: right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.mols.length"
    >
    </el-pagination>
  </div>
  <!-- <div v-else-if="mols.length == 0">无相似数据</div> -->
  <div v-else-if="mols.length > 0">加载中。。。</div>
</template>

<script>
import { StandaloneStructService } from "ketcher-standalone";
import { Ketcher } from "ketcher-core";
import { resultAPI } from "@/api";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "results",
  data() {
    return {
      mols: "", // 所有数据
      dois: "",
      targetURL: "", // 目标图片
      imageURLs: [], //  生成图片
      flight: "",

      // 总的数据
      tableData: [],
      // 分页的数据
      pageData: [],
      // 总数据量 默认为 0
      // pageTotal: 0,
      // 当前页 默认是第一页
      currentPage: 1,
      // 每页大小 默认每页10条数据
      pageSize: 5,
    };
  },

  created() {
    //  获取 传过来的参数
    this.flight = JSON.parse(this.$route.query.flight);

    this.result(); // 获取搜索结果
  },

  methods: {
    // 改变每页大小的回调
    handleSizeChange(val) {
      this.pageSize = val;

      this.pageData = this.queryByPage();
    },
    // 改变当前页的回调
    handleCurrentChange(val) {
      this.currentPage = val;

      this.pageData = this.queryByPage();
    },
    async result() {
      // 发送get请求
      // this.$axios.get("http://192.168.1.104:70/result").then((res) => {
      //   console.log(res);
      //   if (res.status != 200) {
      //     this.$message({
      //       message: "请求数据失败",
      //       type: "error",
      //     });
      //   }
      const { data: res } = await resultAPI();
      console.log(res);

      this.mols = res.mols;
      this.dois = res.dois;

      for (var key in this.mols) {
        // 中断内部循环 防止值覆盖
        try {
          this.dois.forEach((item, index) => {
            if (index == key) {
              this.mols[key].doi = item.doi;
            }
          });
        } catch (e) {
          console.log(e, "e");
        }
      }

      this.mols.forEach((index) => {
        index.doi = index.doi.split("¶");
      });

      this.targetImg(); // 目标图片
      // this.smiMg(); // 生成图片
      this.smImg();

      this.pageData = this.queryByPage();
      // });
    },

    // 实现分页的方法
    queryByPage() {
      // 起始位置 = (当前页 - 1) x 每页的大小
      const start = (this.currentPage - 1) * this.pageSize;
      // 结束位置 = 当前页 x 每页的大小
      const end = this.currentPage * this.pageSize;

      return this.mols.slice(start, end);
    },

    // 目标图片
    targetImg() {
      let structService = new StandaloneStructService();
      let ketcher = new Ketcher({}, structService, {});

      ketcher
        .generateImage(this.flight, {
          outputFormat: "svg", // 生成图片的类型，可以是"svg"或"png"
          backgroundColor: "255, 255, 255", // 背景颜色
        })
        .then((res) => {
          this.targetURL = window.URL.createObjectURL(res); // res是blob类型，用该方法转为url后可以在用img展示
        });
    },

    // 生成 图形
    smiMg(smiles, index) {
      let structService = new StandaloneStructService();
      let ketcher = new Ketcher({}, structService, {});

      ketcher
        .generateImage(smiles, {
          outputFormat: "svg", // 生成图片的类型，可以是"svg"或"png"
          backgroundColor: "255, 255, 255", // 背景颜色
        })
        .then((res) => {
          this.mols[index].imageURL = window.URL.createObjectURL(res);
          this.imageURLs.push(window.URL.createObjectURL(res)); // res是blob类型，用该方法转为url后可以在用img展示
        });
    },

    // 循环调用 生成图形
    smImg() {
      this.mols.forEach((array, index) => {
        var smile = array.smiles;
        this.smiMg(smile, index);
      });
    },

    //  返回搜索页
    preSearch() {
      this.$router.push("/");
    },
  },
};
</script>

<style lang="scss" scoped>
tr {
  table-layout: fixed;
}
.box2 {
  margin-left: 162px;
  margin-top: -162px;
  display: flex;
  height: 220px;
}

.box1 {
  display: flex;
  border: 1px solid;
  width: 150px;
}
th {
  border: 1px solid;
  width: 200px;
}
tr {
  height: 75px;
}
td {
  width: 181px;
  border: 1px solid;
}
a {
  display: flex;
  margin-top: 3px;
  padding-left: -2px;
  box-sizing: border-box;
  margin-left: 60px;
  text-decoration: none;
  color: blue;
}

img {
  width: 178px;
  margin-top: 42px;
}
.el-pagination {
  padding: 2px 525px;
}
</style>